<template>
    <view>
        <view class="main">
            <view class="form noLabel">
                <uni-forms :modelValue="ruleForm" :rules="rules" ref="ruleForm" label-width="0" validateTrigger="blur">
                    <uni-forms-item name="code">
                        <view class="li">
                            <view class="fl"><text class="red">*</text>{{$lang('采购单单号')}}：</view>
                            <view class="fr">
                                <input type="text" v-model="ruleForm.code" :placeholder="$lang('请输入采购单单号')">
                            </view>
                        </view>
                    </uni-forms-item>
                    <uni-forms-item name="supplier_name">
                        <view class="li">
                            <view class="fl"><text class="red">*</text>{{$lang('请选择供应商')}}：</view>
                            <view class="fr">
                                <input type="text" v-model="ruleForm.supplier_name" :placeholder="$lang('请选择供应商')">
                                <image src="../../static/images/icon13.png"></image>
                                <view class="hideBox" @click="purchaseSupplierListFun(1)"></view>
                            </view>
                        </view>
                    </uni-forms-item>
                    <uni-forms-item name="goods_code" v-if="ruleForm.supplier_id">
                        <view class="li">
                            <view class="fl"><text class="red">*</text>{{$lang('请选择商品代码')}}：</view>
                            <view class="fr" style="flex-direction: column;align-items: normal">
                                <view class="frTop">
                                    <input type="text" v-model="ruleForm.goods_code" :placeholder="$lang('请选择商品代码')">
                                    <image src="../../static/images/icon13.png" :class="ruleForm.list && ruleForm.list.length > 0 ? 'rotate180' : ''"></image>
                                    <view class="hideBox" @click="purchaseGoodsListFun(2,ruleForm.supplier_id)"></view>
                                </view>
                                <view class="stockList" v-if="ruleForm.list && ruleForm.list.length > 0">
                                    <view v-for="(item,index) in ruleForm.list" :key="index">
                                        <view class="listLi">
                                            <view class="listLiFl">
                                                <text>{{item.goods_code}}</text>
                                            </view>
                                            <view class="listLiFr" @click="del(index)">
                                                <image src="../../static/images/icon16.png"></image>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </uni-forms-item>
                    <uni-forms-item name="type">
                        <view class="li">
                            <view class="fl"><text class="red">*</text>{{$lang('选择补件采购模式')}}：</view>
                            <view style="margin-top: 15rpx">
                                <view class="radio">
                                    <uni-data-checkbox v-model="ruleForm.type" :localdata="radioList" />
                                </view>
                            </view>
                        </view>
                    </uni-forms-item>
                    <view class="tableBox" style="margin-bottom: 22px">
                        <view class="fl"><text class="red">*</text>{{$lang('采购单信息')}}：</view>
                        <view class="fr">
                            <view class="table">
                                <uni-table border :emptyText="$lang('暂无数据')">
                                    <uni-tr class="tableHead">
                                        <uni-th align="center">{{$lang('估算汇率')}}</uni-th>
                                        <uni-th align="center">{{$lang('估算运费')}}</uni-th>
                                        <uni-th align="center" v-if="ruleForm.type == 2">{{$lang('装柜单号')}}</uni-th>
                                    </uni-tr>
                                    <uni-tr>
                                        <uni-td align="center">
                                            <uni-forms-item :name="'exchange'">
                                                <uni-easyinput v-model="ruleForm.exchange" :placeholder="$lang('请输入')" />
                                            </uni-forms-item>
                                        </uni-td>
                                        <uni-td align="center">
                                            <uni-forms-item :name="'freight'">
                                                <uni-easyinput v-model="ruleForm.freight" :placeholder="$lang('请输入')" />
                                            </uni-forms-item>
                                        </uni-td>
                                        <uni-td align="center" v-if="ruleForm.type == 2">
                                            <uni-forms-item :name="'container_loading_number'">
                                                <uni-easyinput v-model="ruleForm.container_loading_number" :placeholder="$lang('请输入')" />
                                            </uni-forms-item>
                                        </uni-td>
                                    </uni-tr>
                                </uni-table>
                            </view>
                        </view>
                    </view>
                    <view class="info" v-if="supplier">
                        <view class="h1">{{$lang('供应商信息')}}：</view>
                        <view class="list">
                            <view class="li">{{$lang('供应商名称')}}：{{supplier.name}}</view>
                            <view class="li">{{$lang('供应商代码')}}：{{supplier.code}}</view>
                            <view class="li">{{$lang('供应商地址')}}：{{supplier.address}}</view>
                        </view>
                    </view>
                    <view class="info" style="margin-top: 30rpx;" v-if="supplier">
                        <view class="h1">{{$lang('银行信息')}}：</view>
                        <view class="list">
                            <view class="li">{{$lang('银行名称')}}：{{supplier.bank}}</view>
                            <view class="li">{{$lang('账号')}}：{{supplier.account}}</view>
                            <view class="li">{{$lang('银行户名')}}：{{supplier.username}}</view>
                        </view>
                    </view>
                    <view class="tableBox" v-if="ruleForm.list.length > 0" style="margin-bottom: 22px">
                        <view class="fr">
                            <view class="table">
                                <uni-table border :emptyText="$lang('暂无数据')">
                                    <uni-tr class="tableHead">
                                        <uni-th align="center" v-for="(item,index) in tableColumn" :key="index">{{$lang(item.label)}}</uni-th>
                                    </uni-tr>
                                    <uni-tr v-for="(item,index) in ruleForm.list" :key="index">
                                        <uni-td align="center" v-for="(data,dataIndex) in tableColumn" :key="dataIndex">
                                            <text v-if="data.value == 'index'">{{index + 1}}</text>
                                            <view v-else-if="data.value == 'image'">
                                                <image :src="baseUrl + item[data.value]" style="width: 100rpx;height: 100rpx;"></image>
                                            </view>
                                            <view v-else-if="data.value == 'size'">
                                                <uni-forms-item :name="'list.' + index + '.size'" :rules="rules.required.rules">
                                                    <uni-easyinput v-model="item.size" :placeholder="$lang('请输入')" />
                                                </uni-forms-item>
                                            </view>
                                            <view v-else-if="data.value == 'num'">
                                                <uni-forms-item :name="'list.' + index + '.num'" :rules="rules.required.rules">
                                                    <uni-easyinput v-model="item.num" :placeholder="$lang('请输入')" />
                                                </uni-forms-item>
                                            </view>
                                            <view v-else-if="data.value == 'unit'">
                                                <uni-forms-item :name="'list.' + index + '.unit'" :rules="rules.required.rules">
                                                    <uni-easyinput v-model="item.unit" :placeholder="$lang('请输入')" />
                                                </uni-forms-item>
                                            </view>
                                            <view v-else-if="data.value == 'before_unit_price'">
                                                <uni-forms-item :name="'list.' + index + '.before_unit_price'" :rules="rules.required.rules">
                                                    <uni-easyinput v-model="item.before_unit_price" :placeholder="$lang('请输入')" />
                                                </uni-forms-item>
                                            </view>
                                            <view v-else-if="data.value == 'all_price'">
                                                <uni-forms-item :name="'list.' + index + '.all_price'" :rules="rules.required.rules">
                                                    <uni-easyinput v-model="item.all_price" :placeholder="$lang('请输入')" />
                                                </uni-forms-item>
                                            </view>
                                            <view v-else-if="data.value == 'volume'">
                                                <uni-forms-item :name="'list.' + index + '.volume'" :rules="rules.required.rules">
                                                    <uni-easyinput v-model="item.volume" :placeholder="$lang('请输入')" />
                                                </uni-forms-item>
                                            </view>
                                            <view v-else-if="data.value == 'freight'">
                                                <uni-forms-item :name="'list.' + index + '.freight'" :rules="rules.required.rules">
                                                    <uni-easyinput v-model="item.freight" :placeholder="$lang('请输入')" />
                                                </uni-forms-item>
                                            </view>
                                            <view v-else-if="data.value == 'estimated_purchase_price'">
                                                <uni-forms-item :name="'list.' + index + '.estimated_purchase_price'" :rules="rules.required.rules">
                                                    <uni-easyinput v-model="item.estimated_purchase_price" :placeholder="$lang('请输入')" />
                                                </uni-forms-item>
                                            </view>
                                            <view v-else-if="data.value == 'memo'">
                                                <uni-forms-item :name="'list.' + index + '.memo'" :rules="rules.required.rules">
                                                    <uni-easyinput v-model="item.memo" :placeholder="$lang('请输入')" />
                                                </uni-forms-item>
                                            </view>
                                            <text v-else>{{item[data.value]}}</text>
                                        </uni-td>
                                    </uni-tr>
                                </uni-table>
                            </view>
                        </view>
                    </view>
                </uni-forms>
            </view>
        </view>
        <view class="footerFen"></view>
        <view class="footer">
            <view class="top">
                <view class="fl" @click="$common.back()">{{$lang('取消')}}</view>
                <view class="fr" @click="submit">{{ruleForm.id ? $lang('重新提交') : $lang('发起采购审批')}}</view>
            </view>
        </view>
        <u-picker
                :show="pickerShow"
                :columns="pickerColumns"
                @close="pickerShow = false"
                @cancel="pickerShow = false"
                @confirm="pickerConfirm"
                :keyName="keyName"
                closeOnClickOverlay
        ></u-picker>
    </view>
</template>

<script>
    import {
        purchaseSupplierList,
        purchaseGoodsList,
        purchaseAdd,
        purchaseEditInfo,
        purchaseEdit
    } from '../../api/api'
    export default {
        data() {
            return {
                baseUrl:'',
                ruleForm:{
                    id:'',
                    type:1,
                    list:[]
                },
                rules:{
                    required: {
                        rules: [
                            { required: true, errorMessage: this.$lang('请输入') }
                        ]
                    },
                    code: {
                        rules: [
                            { required: true, errorMessage: this.$lang('请输入采购单单号') }
                        ]
                    },
                    supplier_name: {
                        rules: [
                            { required: true, errorMessage: this.$lang('请选择供应商') }
                        ]
                    },
                    goods_code: {
                        rules: [
                            { required: true, errorMessage: this.$lang('请选择商品代码') }
                        ]
                    },
                    type: {
                        rules: [
                            { required: true, errorMessage: this.$lang('选择补件采购模式') }
                        ]
                    },
                    exchange: {
                        rules: [
                            { required: true, errorMessage: this.$lang('请输入估算汇率') }
                        ]
                    },
                    freight: {
                        rules: [
                            { required: true, errorMessage: this.$lang('请输入估算运费') }
                        ]
                    },
                    container_loading_number: {
                        rules: [
                            { required: true, errorMessage: this.$lang('请输入估算海运费') }
                        ]
                    },
                },
                type:'',
                pickerShow:false,
                pickerColumns:[],
                keyName:'',
                radioList:[
                    { text: this.$lang('付费模板'), value: '1'},
                    { text: this.$lang('免费模板'), value: '2'},
                ],
                supplier:'',
                tableColumn:[
                    {label:this.$lang('序号'),value:'index'},
                    {label:this.$lang('一级分类'),value:'category_one_name'},
                    {label:this.$lang('二级分类'),value:'category_two_name'},
                    {label:this.$lang('产品编号'),value:'goods_code'},
                    {label:this.$lang('产品名称'),value:'goods_name'},
                    {label:this.$lang('产品图片'),value:'image'},
                    {label:this.$lang('建议标价'),value:'advise_price'},
                    {label:this.$lang('最低售价'),value:'lowest_selling_price'},
                    {label:this.$lang('系统最低售价'),value:'system_lowest_selling_price'},
                    {label:this.$lang('产品属性'),value:'product_attributes'},
                    {label:this.$lang('可销售库存'),value:'all_num'},
                    {label:this.$lang('尺寸'),value:'size'},
                    {label:this.$lang('数量'),value:'num'},
                    {label:this.$lang('单位'),value:'unit'},
                    {label:this.$lang('上次采购单价'),value:'before_unit_price'},
                    {label:this.$lang('总价'),value:'all_price'},
                    {label:this.$lang('单品体积'),value:'volume'},
                    {label:this.$lang('运费均摊'),value:'freight'},
                    {label:this.$lang('估算进货单价'),value:'estimated_purchase_price'},
                    {label:this.$lang('备注'),value:'memo'},
                ],
            }
        },
        onLoad(options) {
            this.ruleForm.id = options.id;
            if(this.ruleForm.id){
                this.purchaseEditInfoFun();
            }
            console.log(this.ruleForm);
            this.baseUrl = this.$config.baseUrl;
            uni.setNavigationBarTitle({
                title: this.$lang('新增采购单')
            });
        },
        methods: {
            purchaseEditInfoFun(){
                purchaseEditInfo({
                    id:this.ruleForm.id
                }).then(res => {
                    let id = this.ruleForm.id;
                    this.ruleForm = res.data;
                    this.ruleForm.id = id;
                    this.ruleForm.list = res.data.goods_list;
                    let goodsCode = [];
                    this.ruleForm.list.forEach(item => {
                        item.category_one_name = item.category_one.name;
                        item.category_two_name = item.category_two.name;
                        goodsCode.push(item.goods_code);
                    });
                    this.ruleForm.goods_code = goodsCode.toString();
                    this.supplier = res.data.supplier;
                    purchaseSupplierList().then(data => {
                        data.data.forEach(item => {
                            if(res.data.supplier_id == item.id){
                                this.ruleForm.supplier_name = item.name;
                                this.$forceUpdate();
                            }
                        })
                    });
                    console.log(this.ruleForm);
                })
            },
            del(index){
                this.ruleForm.list.splice(index,1);
            },
            submit(){
                this.$refs.ruleForm.validate().then(valid => {
                    console.log(this.ruleForm);
                    if(this.ruleForm.id){
                        purchaseEdit(this.ruleForm).then(res => {
                            if(res.code == 1){
                                uni.showToast({
                                    title:this.$lang('重新提交成功'),
                                    icon:'none'
                                });
                                setTimeout(() => {
                                    this.$common.back();
                                    uni.$emit('returnData',1);
                                },500)
                            } else{
                                uni.showToast({
                                    title:res.msg,
                                    icon:'none'
                                })
                            }
                        })
                    } else{
                        purchaseAdd(this.ruleForm).then(res => {
                            if(res.code == 1){
                                uni.showToast({
                                    title:this.$lang('新增成功'),
                                    icon:'none'
                                });
                                setTimeout(() => {
                                    this.$common.back();
                                    uni.$emit('returnData',1);
                                },500)
                            } else{
                                uni.showToast({
                                    title:res.msg,
                                    icon:'none'
                                })
                            }
                        })
                    }
                }).catch(err => {

                })
            },
            pickerConfirm(e){
                if(this.type == 1){
                    this.ruleForm.supplier_name = e.value[0].name;
                    this.ruleForm.supplier_id = e.value[0].id;
                    this.supplier = e.value[0];
                } else if(this.type == 2){
                    this.pickerColumns[0].forEach(item => {
                        if(item.goods_code == e.value[0].goods_code){
                            this.ruleForm.list.push(item);
                        }
                    });
                    let list = this.ruleForm.list.filter((value, index, self) => {
                        return index === self.findIndex(t => (t.goods_code === value.goods_code));
                    });
                    this.ruleForm.list = list;
                    let goodsCode = [];
                    this.ruleForm.list.forEach(item => {
                        goodsCode.push(item.goods_code);
                        item.category_one_name = item.category_one.name;
                        item.category_two_name = item.category_two.name;
                    });
                    this.ruleForm.goods_code = goodsCode.toString();
                }
                this.pickerShow = false;
            },
            purchaseGoodsListFun(type,supplier_id){
                purchaseGoodsList({
                    supplier_id:supplier_id
                }).then(res => {
                    this.pickerColumns = [];
                    this.pickerColumns.push(res.data);
                    this.type = type;
                    this.pickerShow = true;
                    this.keyName = 'goods_code';
                })
            },
            purchaseSupplierListFun(type){
                purchaseSupplierList().then(res => {
                    this.pickerColumns = [];
                    this.pickerColumns.push(res.data);
                    this.type = type;
                    this.pickerShow = true;
                    this.keyName = 'name';
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .main{
        padding: 60rpx 24rpx 40rpx 24rpx;
        .form{
            .radio{
                /deep/ .checklist-box{
                    .checklist-content{
                        .checklist-text{
                            color: #222;
                            font-size: 32rpx;
                        }
                    }
                    &.is-checked{
                        .radio__inner{
                            border-color: #365aa6;
                            .radio__inner-icon{
                                background-color: #365aa6;
                            }
                        }
                        .checklist-content{
                            .checklist-text{
                                color: #365aa6;
                            }
                        }
                    }
                }
            }
            .li{
                display: flex;
                flex-direction: column;
                .fl{
                    font-size: 32rpx;
                    color: #222;
                }
                .fr{
                    display: flex;
                    align-items: center;
                    position: relative;
                    min-height: 90rpx;
                    border: 1px solid #747474;
                    padding: 0 33rpx;
                    border-radius: 10rpx;
                    margin-top: 15rpx;
                    .frTop{
                        display: flex;
                        align-items: center;
                        position: relative;
                        min-height: 90rpx;
                    }
                    input{
                        font-size: 32rpx;
                        color: #222;
                        padding-right: 15rpx;
                        width: 100%;
                    }
                    image{
                        width: 60rpx;
                        height: 60rpx;
                    }
                    .stockList{
                        padding-bottom: 20rpx;
                        .listLi{
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            height: 90rpx;
                            background: #eff2f8;
                            border-radius: 10rpx;
                            padding: 0 50rpx;
                            margin-top: 15rpx;
                            .listLiFl{
                                display: flex;
                                align-items: center;
                                text{
                                    font-size: 30rpx;
                                    color: #365aa6;
                                }
                                input{
                                    width: 80rpx;
                                    margin: 0 15rpx;
                                    border-bottom: 1px solid #365aa6;
                                    text-align: center;
                                    font-size: 30rpx;
                                    color: #365aa6;
                                }
                            }
                            .listLiFr{
                                image{
                                    width: 22rpx;
                                    height: 22rpx;
                                    vertical-align: middle;
                                }
                            }
                        }
                    }
                }
            }
            .tableBox{
                .fl{
                    font-size: 32rpx;
                    color: #222;
                }
                .fr{
                    margin-top: 15rpx;
                }
            }
            .info{
                .h1{
                    display: flex;
                    align-items: center;
                    font-size: 32rpx;
                    color: #222;
                    &:before{
                        content: '';
                        width: 8rpx;
                        height: 30rpx;
                        border-radius: 8rpx;
                        background: #365aa6;
                        margin-right: 20rpx;
                    }
                }
                .list{
                    padding-left: 25rpx;
                    font-size: 28rpx;
                    line-height: 48rpx;
                    color: #222;
                    margin-top: 18rpx;
                }
            }
        }
    }
    .footerFen{
        height: 179rpx;
    }
    .footer{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 24rpx 24rpx 45rpx 24rpx;
        background: #f5f5f5;
        .top{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .fl{
                width: 280rpx;
                height: 90rpx;
                border-radius: 90rpx;
                text-align: center;
                line-height: 90rpx;
                font-size: 36rpx;
                color: #555;
                border: 1px solid #c9c9c9;
                background: #eee;
            }
            .fr{
                width: 400rpx;
                height: 90rpx;
                border-radius: 90rpx;
                text-align: center;
                line-height: 90rpx;
                background: #365aa6;
                color: #fff;
                font-size: 36rpx;
            }
        }
    }
</style>
